<template>
  <div class="realtime">
    <div class="content-box">
      <div class="content-top">
        <h2 class="h3">领用申请</h2>
        <div class="top-wen">
          <p class="wen">已领用</p>
          <p class="yanse1">({{ receive }})</p>
          <p class="wen">待审批</p>
          <p class="yanse2">({{ waitAudit }})</p>
        </div>
      </div>
      <div class="content-center">
        <div class="list-box" v-for="(item, index) in applyList" :key="index" @mouseover="aa(index)" :class="isborder == index ? 'isborder' : ''" @click="a(item.applyStatus, item.id)">
          <div style="display: flex" class="a">
            <img :src="item.img" alt class="img-one" />
            <div class="img-two">
              <img v-if="item.applyStatus == 1" src="@/assets/public/空闲.png" alt/>
              <img v-else-if="item.applyStatus == 3" src="@/assets/public/被领用.png" alt/>
            </div>
          </div>
          <div class="list-boot">
            <p>{{ item.comparatorName }}对比仪</p>
            <div class="address-box">
              <p>型号：</p>
              <p>{{ item.comparatorMn }}</p>
            </div>
            <div style="color: #fff; position: absolute;right: 3%;bottom: 3%">
              <a-button class="btn" type="primary" @click.stop="changeBack(item)" size="small" v-if="item.applyStatus == 3">退回</a-button>
              <a-button class="btn" type="primary" @click.stop="changeDetail(item.id)" style="margin-left: 10px" size="small">详情</a-button>
              <a-button type="danger" @click.stop="changeDelete(item)" style="margin-left: 10px" size="small" v-if="item.applyStatus == 1">删除</a-button>
            </div>
          </div>
        </div>
        <div v-for="(v,i) in 5" :key="i+'a'" style="width: 15%;height: 0"></div>
      </div>
      <div class="content-bottom">
        <div class="page-box">
          <p class="totalclass">共{{ total }}条记录</p>
          <a-pagination v-model="this.form.currentPage" :total="total" :defaultPageSize="12" :item-render="itemRender" @change="pagechangeFn"/>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "index",
  data() {
    return {
      form: {
        currentPage: 1,
        pageSize: 12,
        userId: "",
      },
      total: 0,
      isborder: "",
      applyList: [], //申请列表
      receive: "", //已领用数量
      waitAudit: "", //未审批数量
    };
  },

  // 分页器
  methods: {
    //, 点击换页面
    changeDetail(data) {
      console.log(data);
      this.$router.push({
        name: "collect",
        query: {
          id: data,
        },
      });
    },
    changeDelete(data){
      let then = this;
      this.$confirm({
        title:"是否确认删除？",
        onOk(){
          then.$api.comparatorInforemoveById(data.id).then(res=>{
            if(res.data.code == 0){
              then.$message.info("删除成功");
              then.showList();
            }else if (res.data.code == 500){
              then.$message.warning("设备已被领用无法删除");
            }else {
              then.$message.error(res.data.errorMessage);
            }
          })
        },
        onCancel(){
          return false
        }
      })
    },
    changeBack(data){
      let then = this;
      this.$confirm({
        title:"是否确认退回？",
        onOk(){
          then.$api.PostauditOneComparator({ id: data.id, isAgree: 3 }).then((res) => {
            if(res.data.code == 0){
              then.$message.info("退回成功！")
              then.showList()
            }else {
              then.$message.error("退回失败！")
            }
            console.log(res);
          });
        },
      })

    },
    getId() {
      this.form.userId = this.$user.id;
    },
    itemRender(currentPage, type, originalElement) {
      if (type === "prev") {
        return <a>上一页</a>;
      } else if (type === "next") {
        return <a>下一页</a>;
      }
      return originalElement;
    },
    pagechangeFn(page, pageSize) {
      console.log(page, pageSize);
      this.form.currentPage = page;
      this.form.PageSize = pageSize;
      this.showList();
    },
    // 点击换页面
    a(status, id) {
      if (status == 1) {
        this.$router.push({
          name: "record",
          query: {
            machineId: id,
          },
        });
      }else {
        this.$message.info("设备已被领用！")
      }
    },
    // 鼠标移入移出
    aa(v) {
      this.isborder = v;
    },
    showList() {
      //请求申请展示列表
      this.$api.PostlistComparatorApply(this.form).then((res) => {
        this.applyList = res.data.data.comparatorApplyDetailsPo.records;
        this.total = res.data.data.comparatorApplyDetailsPo.total;
        this.receive = res.data.data.receive;
        this.waitAudit = res.data.data.waitAudit;
        console.log(res.data.data.comparatorApplyDetailsPo);
      });
    },
  },
  mounted() {
    this.getId();
    this.showList(); //请求申请展示列表
  },
};
</script>

<style scoped lang="scss">
.content-top {
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.top-wen {
  display: flex;
}
.wen {
  color: #bebebe;
}
.yanse1 {
  color: lawngreen;
}
.yanse2 {
  color: #9fb043;
}

.realtime {
  width: 100%;
  height: 100%;
  padding: 1%;
  box-sizing: border-box;
}
.content-box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.content-center {
  width: 100%;
  height: 87%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.content-center .list-box {
  width: 15%;
  height: 40%;
  flex: 0 0 15%;
  border: 1px solid #deefff;
  border-radius: 6px;
  box-sizing: border-box;
  margin-left: 10px;
  cursor: pointer;
  background: #deefff;
}
.list-boot {
  width: 100%;
  height: 20%;
  float: left;
}
.content-center .list-box > div > .img-one {
  width: 100%;
  height: 70%;
}
.content-center .list-box .a > img {
  width: 87%;
  height: 170px;
  margin: 0 auto;
  margin-top: 5%;
}
.content-center .list-box {
  position: relative;
  padding: 0;
}
.content-center .img-two {
  position: absolute;
  top: -1%;
  right: 4.5%;
}
.list-boot > p {
  color: #000;
  width: 100%;
  line-height: 20px;
  padding-left: 6px;
  overflow: hidden;
  text-overflow: ellipsis;

  white-space: nowrap;
}
.address-box {
  line-height: 30px;
  font-size: 14px;
  color: #1890ff;
}
.address-box > p {
  display: inline-block;
  margin-top: 5px;
  padding-left: 6px;
}

.content-bottom {
  width: 100%;
  height: 3.5%;
}
.page-box {
  float: right;
  display: flex;
  align-items: center;
}
.totalclass {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  margin-right: 20px;
}
.realtime .isborder {
  border: 1px solid #258cd7;
  box-sizing: border-box;
}
::v-deep .ant-modal-body{
  padding: 0 24px;
}
</style>